import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { uniqueId } from 'lodash';

interface DemoUser {
  id: string;
  name: string;
  age: number;
  random: number;
}

@Component({
  selector: 'app-align',
  templateUrl: './align.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AlignComponent implements OnInit {
  data: DemoUser[];
  constructor() {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.data = Array.from({ length: 5 }).map((item, key) => this.initUser(key));
  }

  initUser(key: number) {
    return { id: uniqueId('uid'), name: `user${key}`, age: 10 + key, random: parseInt(`${Math.random() * 100  }`, 10) };
  }
}
